<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { getAllProject, getProjectByKw } from "@/api/innovation";
import { SUCCESS } from "@/core/constants/HttpStatus";
import { ElMessage } from "element-plus";

const router = useRouter();

const selectedOption = ref("关键词"); // 搜索选项
const selectedInput = ref(""); // 搜索文本
const projectList = ref([]); // 搜索目标数据
const pageData = ref([]); // 页面数据对象
const currentPage = ref(1); // 当前页数
const loading = ref(false);

const convertedTotal = ref();

// 获取所有的项目数据
const getAll = async () => {
  try {
    loading.value = true;
    const res = await getAllProject({
      current: 1,
      size: 6,
    });
    console.log(res);
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      projectList.value = data.records;
      convertedTotal.value = Number(data.total);
    } else {
      throw new Error("数据加载失败");
    }
    loading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

// 跳转详情页面
const goToDetails = (ppName) => {
  const query = { ppName: ppName };
  router.push({ path: "/innovation/detail", query });
};

// 发送搜索请求
const submitData = async () => {
  try {
    loading.value = true;
    const res = await getProjectByKw({
      type: selectedOption.value,
      kw: selectedInput.value,
      current: 1,
      size: 6,
    });
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      projectList.value = data.records;
      convertedTotal.value = Number(data.total);
      ElMessage.info(`总共搜索到${convertedTotal.value}条数据`);
    } else {
      ElMessage.info("未查询到结果");
    }
    loading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

// 清除搜索框
const clearSelectedInput = () => {
  selectedOption.value = "关键词";
  selectedInput.value = "";
  // 清空自动搜索全部数据
  getAll();
};

// 翻页
const handlePageChange = async () => {
  try {
    loading.value = true;
    const res = await getAllProject({
      current: currentPage.value,
      size: 6,
    });
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      projectList.value = data.records;
      convertedTotal.value = Number(data.total);
    } else {
      throw new Error("数据加载失败");
    }
    loading.value = false;
  } catch (error) {
    ElMessage.error(error.message || "数据加载失败");
  }
};

// 控制翻页
watch(currentPage, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    handlePageChange();
  }
});

onMounted(() => {
  getAll();
});
</script>
<template>
  <div class="allBox">
    <div class="topBox">
      <div class="searchBox">
        <select v-model="selectedOption">
          <option value="关键词">关键词</option>
          <option value="指导老师">指导老师</option>
          <option value="年级">年级</option>
        </select>
        <input
          class="searchInput"
          type="text"
          v-model="selectedInput"
          placeholder="输入搜索信息"
          @keyup.enter="submitData"
        />
        <button type="button" class="select-button" @click="submitData">
          <i class="iconfont icon-sousuo"></i>
        </button>
      </div>
      <button class="clearButton" @click="clearSelectedInput">
        <i class="iconfont icon-shuaxin" />
      </button>
    </div>
    <div v-loading="loading" style="min-height: 300px">
      <div class="Items">
        <div class="ItemsBox">
          <div
            class="allItem"
            v-for="(item, index) in projectList"
            :key="index"
            @click="goToDetails(item.ppName)"
          >
            <div class="alltitle">
              <i class="iconfont icon-jiangbei1"></i>
              <span id="ppName">{{ item.ppName }}</span>
            </div>
            <span class="suitable" v-if="item.ppSuitableStudent"
              >本系适合对象:{{ item.ppSuitableStudent }}</span
            >
            <div class="hotStar">
              <i
                class="iconfont icon-shoucang"
                v-for="n in parseInt(item.ppPopularity)"
                :key="n"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div v-if="projectList == null" class="selectedNone">无相关信息</div>
      <el-pagination
        class="page"
        v-if="projectList.length"
        :page-size="6"
        layout="prev, pager, next"
        :total="convertedTotal"
        v-model:current-page="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped lang="less">
.allBox {
  width: 1000px;
  z-index: 0;
}

.topBox {
  display: flex;
  flex-direction: row;
  width: 620px;
  align-items: center;
  margin: 10px auto;
}

.searchBox {
  width: 600px;
  height: 35px;
  border: 2px solid #1e9ab5;
  background-color: #ffffff;
  .searchInput {
    padding-left: 10px;
  }
}

select,
input,
button {
  border: 0;
  outline: none;
}

select {
  height: 35px;
  width: auto;
  font-size: 16px;
  border-right: 2px solid #1e9ab5;
}

input {
  width: 430px;
  font-size: 16px;
}

button {
  float: right;
  height: 35px;
}

.select-button {
  background-color: #ffffff;
  color: #1e9ab5;
}

.select-button i {
  font-size: 22px;
  margin-right: 5px;
}

.topBox i {
  font-size: 22px;
  color: #1e9ab5;
}

.clearButton {
  background-color: #ffffff;
  margin-left: 2px;
}

/* 比赛项目卡片 */
.Items {
  margin-top: 3%;
  display: flex;
  justify-content: center;
  .ItemsBox {
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
  }
}

.allItem {
  width: 300px;
  height: 170px;
  box-shadow: 2px 2px 10px rgb(199, 198, 198);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
  margin-bottom: 30px;
  position: relative;
}

.allItem .hotStar {
  position: absolute;
  bottom: 10%;
}

.allItem .hotStar i {
  color: rgb(246, 246, 23);
  font-size: 20px;
}

.alltitle {
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 15%;
}

.alltitle span {
  height: auto;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.allItem i {
  color: #1e9ab5;
  font-size: 24px;
  margin-right: 2px;
  margin-top: 2px;
}

.suitable {
  font-size: 16px;
  font-weight: bold;
  line-height: 45px;
  position: relative;
  top: 50%;
}

/*搜索无结果*/
.selectedNone {
  color: grey;
  display: flex;
  justify-content: center;
}

/*翻页*/
.page {
  display: flex;
}
</style>
